<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>组件使用的细节点</title>
	<script src="vue.js"></script>
</head>
<body>
	<!-- 第一个知识点 -->
	<!-- 这个row组件写成is的形式, 是因为直接写 <row></row>会解析错误 -->
	<div id="root">
		<table>
			<tbody>
				<tr is="row"></tr>
				<tr is="row"></tr>
				<tr is="row"></tr>
			</tbody>
		</table>
	</div>
	<script>
		Vue.component('row', {
			template: '<tr><td>this is a row</td></tr>'
		})

		var vm = new Vue({
			el: '#root',
			data: {

			}
		})
	</script>

	<!-- ------------------------------------------------------------------------- -->
	<!-- 第二个知识点 -->
	<!-- 在子组件中, data是一个函数, 而不是一个对象.  -->
	<hr>	

	<div id="root1">
		<table>
			<tbody>
				<tr is="row1"></tr>
				<tr is="row1"></tr>
				<tr is="row1"></tr>
			</tbody>
		</table>
	</div>
	<script>
		Vue.component('row1', {
			data: function() {
				return {
					content: 'this is a row'
				}
			},
			template: '<tr><td>{{content}}</td></tr>'
		})

		var vm1 = new Vue({
			el: '#root1',
			data: {

			}
		})
	</script>
	
	<hr>
	<!-- ------------------------------------------------------------------------- -->
	<!-- 第三个知识点 -->
	<!-- 在vue中操作dom, 点击获取div标签中的内容 -->
	<div id="root2">
		<div 
			ref="hello" 
			@click="handleClick"
		>hello world</div>
	</div>
	<script>
		var vm2 = new Vue({
			el: '#root2',
			data: {

			},
			methods:{
				handleClick: function(){
					console.log(this.$refs.hello.innerHTML)
				}
			}
		})
	</script>
	<!-- ------------------------------------------------------------------------- -->
	<hr>
	<!-- 在vue中操作dom, 点击子组件中的内容 -->
	<!-- 作用在子组件上的 ref, 获取到的是 整个子组件的引用 -->
	<div id="root3">
		<counter ref="one" @change="handleChange"></counter>
		<counter ref="two" @change="handleChange"></counter>
		<div>{{total}}</div>
	</div>
	<script>
		Vue.component('counter', {
			data: function(){
				return {
					number: 0
				}
			},
			template:'<div @click="handleClick">{{number}}</div>',
			methods: {
				handleClick: function(){
					this.number ++
					this.$emit('change')
				}
			}
		})
		var vm3 = new Vue({
			el: '#root3',
			data: {
				total: 0
			},
			methods: {
				handleChange: function(){
					this.total = this.$refs.one.number + this.$refs.two.number
				}		
			}
			
		})
	</script>


</body>
</html>